Functional Component - kii's memo

Functional Component

JavaScriptの関数函数 functionの形をしたComponent コンポーネント code

hook Reactによって、State 状態を持つことができるようになった

code:sample.js

function Welcome(props) {

return <h1>Hello, {props.name}</h1>;

}

レンダー内でアロー関数 arrow function

<button onClick={() => this.handleClick()}>Click Me</button>

コンポーネントがレンダーされるたびに新しい関数が作成される

Performance パフォーマンスの問題がでたら、

const handleClick=()=>{}をuseCallback hooksとかする？

実装の参考になるcode

chakra-ui/packages at main · chakra-ui/chakra-ui

hook Reactで細かく実装していて良い

参考

コンポーネントと props – React

コンポーネントに関数を渡す – React

大事なこと書いてる